<template>
  <el-drawer
    :title="form.id ? '修改门店' : '新增门店'"
    :visible.sync="$props.drawer"
    :before-close="handleClose"
    size="40%"
  >
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="门店名称" prop="companyName" :rules="{ required: true, message: '门店名称不能为空'}" label-width="120px">
        <div style="width: 70%;">
          <el-input v-model="form.companyName" placeholder="请输入门店名称" clearable size="small" />
        </div>
      </el-form-item>

      <el-form-item label="门店图" prop="companyImage" :rules="{ required: true, message: '上传产品图片'}" label-width="120px">
        <ImageUpload v-model="form.companyImage" :limit="1" />
      </el-form-item>

      <el-form-item label="门店介绍" prop="companyIntroduce" :rules="{ required: true, message: '门店介绍不能为空'}" label-width="120px">
        <div style="width: 70%;">
          <el-input v-model="form.companyIntroduce" type="textarea" placeholder="请输入门店介绍" clearable size="small" />
        </div>
      </el-form-item>

      <el-form-item label="门店地址" prop="address" :rules="{ required: true, message: '门店地址不能为空'}" label-width="120px">
        <!-- <div style="width: 40%;">
          <el-cascader
            v-model="form.address"
            :options="areaList"
            clearable
          />
        </div> -->
        <div style="width: 70%;">
          <el-input v-model="form.address" placeholder="请输入门店地址" clearable size="small" />
        </div>
      </el-form-item>

      <el-form-item label="社会信用代码" prop="creditCode" :rules="{ required: true, message: '社会信用代码不能为空'}" label-width="120px">
        <div style="width: 70%;">
          <el-input v-model="form.creditCode" placeholder="请输入社会信用代码" clearable size="small" />
        </div>
      </el-form-item>

      <el-form-item>
        <el-button :loading="loading" type="primary" @click="onSubmit">{{ form.id ? '立即修改' : '立即创建' }}</el-button>
        <el-button @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script>
import { area } from '@/utils/area'
// import QuillText from '@/components/QuillText/index'
import request from '@/utils/request'

export default {
  components: {
    // QuillText
  },
  props: {
    drawer: {
      type: Boolean,
      default: false
    },
    defaultValue: {
      type: Object,
      default: () => ({})
    },
    classifyList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: {

      },
      loading: false,
      areaList: (() => {
        const list = area.map(item => {
          return {
            value: item.ad_name,
            label: item.ad_name,
            children: item.children.map(item => ({ value: item.name, label: item.name }))
          }
        })
        return list
      })()
    }
  },
  watch: {
    defaultValue(val, val2) {
      this.form = val
    }
  },
  methods: {
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 拆分城市
          // const { area, productDetail } = this.form
          // const province = area[0]
          // const city = area[1]
          // const accessArea = productDetail.accessArea.join('-')
          // Reflect.deleteProperty(this.form, 'area')
          // const params = {
          //   ...this.form,
          //   province,
          //   city,
          //   productDetail: {
          //     ...productDetail,
          //     accessArea
          //   }
          // }
          this.request(this.form)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    async request(params) {
      try {
        this.loading = true
        await request({
          url: params.id ? 'system/company/update' : 'system/company/add',
          method: 'post',
          data: params
        })
        this.$message({
          message: params.id ? '修改成功' : '添加成功',
          type: 'success',
          duration: 2000,
          onClose: () => {
            this.$emit('add-success')
            this.$refs['form'].resetFields()
          }
        })
      } catch (error) {
        this.$message({
          message: error,
          type: 'warning'
        })
      } finally {
        this.loading = false
      }
      //
    },
    handleClose() {
      this.$emit('close:drawer', false)
    }
  }
}
</script>

<style scoped>
  .item {
    display: flex;
    justify-content: right;
  }
  .required {
    color: red;
  }
</style>
